[iOS][Swift] UIKitをベンリにしてくれる Spring (4)

田宮宙比己

2015.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Spring

Springは、Meng Toさんが GitHub で公開されているライブラリです。Core Animation を使ったアニメーションや、View の周りの border の調整など UIKit のアレやコレを、カンタンにしてくれます。

今回は、ひとまず完結編として、これまでにご紹介したことを組み合わせて、少し複雑なアニメーションを実現してみます。

コレまでのシリーズについては以下を御覧ください。

[iOS][Swift] UIKitをベンリにしてくれる Spring (1) [iOS][Swift] UIKitをベンリにしてくれる Spring (2) [iOS][Swift] UIKitをベンリにしてくれる Spring (3)

今回のテーマ

今回は、花札をアニメーションさせてみようと思います。

準備

今回のデモを再現してみたい方は、[iOS][Swift] UIKitをベンリにしてくれる Spring (1) を参考に、Swift プロジェクトを作成後、Spring をプロジェクトに追加してください。

Storyboard

Storyboard 上に２枚の花札をおきました。ImageView を２つ配置し、Identity Inspector の Custom Class で各々 SpringImageView を指定しています。

また、花札画像を Attribute Inspector の Image で指定しています。

assets

今回は、これらの画像を使います。 ※一部画像は今回使用していません。

アニメーションの流れ

畳に置かれた花札の横に、もう一枚の花札を打ち付けると、置かれた花札が吹き飛び、最後に勝利のロゴが表示される流れです。

コーディング

今回は簡易なデモということで、viewDidLoad にサクッと書いていきます。

IBOutlet

@IBOutlet weak var leftCardSpringImageView: SpringImageView!
@IBOutlet weak var rightCardSpringImageView: SpringImageView!

victorySpringImageView

var victorySpringImageView = SpringImageView.new()
victorySpringImageView.image = UIImage(named: "youwin")
victorySpringImageView.frame = CGRectMake((self.view.frame.width - 300) / 2, (self.view.frame.height - 100) / 2, 300, 100)
victorySpringImageView.animation = "zoomIn"
victorySpringImageView.duration = 2
victorySpringImageView.alpha = 0
victorySpringImageView.delay = 1

勝利のロゴです。

花札と勝利ロゴなど、コンポーネント同士が重なって見難くなるのを防ぐため、 Storyboard で定義せず、一からコードで定義しています。

流れをざっと説明すると以下のとおりです。

SpringImageView 型の victorySpringImageView の生成
画像を指定
大きさと初期位置を指定
アニメーションの種類を "zoomIn" に指定
動作時間は２秒
最初は表示されないよう、alpha を 0 に設定
１秒遅らせてアニメーション開始

花札

// アニメーションの種類を指定
self.leftCardSpringImageView.animation = "zoomIn"
self.rightCardSpringImageView.animation = "zoomOut"

// アニメーション時間の長さを指定
self.leftCardSpringImageView.duration = 2
self.rightCardSpringImageView.duration = 3

// view が 読み込まれてから少し間を置く
self.leftCardSpringImageView.delay = 1

花札 (leftCardSpringImageView, rightCardSpringImageView) について、各種指定をしています。

アニメーション実行

self.leftCardSpringImageView.animateNext { () -> () in
    self.rightCardSpringImageView.rotate = 0.1
    self.rightCardSpringImageView.x += 100
    self.rightCardSpringImageView.animateNext{ () -> () in
        self.leftCardSpringImageView.delay = 0
        self.leftCardSpringImageView.repeatCount = 3
        self.leftCardSpringImageView.animation = "morph"
        self.leftCardSpringImageView.animateNext({ () -> () in
            self.view.addSubview(victorySpringImageView)
            victorySpringImageView.animate()
            victorySpringImageView.alpha = 1
        })
    }
}

4つのアニメーションを連続して実行しています。

花札を畳に打ち付ける動き

左の花札のアニメーション（ズームイン）

吹き飛ばされる花札の動き

右の花札のアニメーション（右方向にズレながら、回転しつつズームアウト）

勝利して喜ぶ花札の動き

"morph" アニメーションを３回繰り返す

勝利のロゴが表示される動き

コード全体

import UIKit
import Spring

class ViewController: UIViewController {
    
    @IBOutlet weak var leftCardSpringImageView: SpringImageView!
    @IBOutlet weak var rightCardSpringImageView: SpringImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        var victorySpringImageView = SpringImageView.new()
        victorySpringImageView.image = UIImage(named: "youwin")
        victorySpringImageView.frame = CGRectMake((self.view.frame.width - 300) / 2, (self.view.frame.height - 100) / 2, 300, 100)
        victorySpringImageView.animation = "zoomIn"
        victorySpringImageView.duration = 2
        victorySpringImageView.alpha = 0
        victorySpringImageView.delay = 1
        
        // アニメーションの種類を指定
        self.leftCardSpringImageView.animation = "zoomIn"
        self.rightCardSpringImageView.animation = "zoomOut"
        
        // アニメーション時間の長さを指定
        self.leftCardSpringImageView.duration = 2
        self.rightCardSpringImageView.duration = 3
        
        // view が 読み込まれてから少し間を置く
        self.leftCardSpringImageView.delay = 1
        
        // 連続したアニメーション処理
        self.leftCardSpringImageView.animateNext { () -> () in
            self.rightCardSpringImageView.rotate = 0.1
            self.rightCardSpringImageView.x += 100
            self.rightCardSpringImageView.animateNext{ () -> () in
                self.leftCardSpringImageView.delay = 0
                self.leftCardSpringImageView.repeatCount = 3
                self.leftCardSpringImageView.animation = "morph"
                self.leftCardSpringImageView.animateNext({ () -> () in
                    self.view.addSubview(victorySpringImageView)
                    victorySpringImageView.animate()
                    victorySpringImageView.alpha = 1
                })
            }
        }
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}